<template>
  <div class="controls">
    <div class="dec">
      <span class="mins">-</span>
    </div>
    <div class="input">
      <input autocomplete="off" class="itxt" placeholder="1" />
    </div>
    <div class="add">
      <span class="plus">+</span>
    </div>
  </div>
</template>
<script lang="ts">
export default {
  name: "InputName",
};
</script>
<script lang="ts" setup></script>

<!-- <script>
/*
  1. 有最小值和最大值
  2. 输入小于最小值，等于最小值
  3. 输入大于最大值，等于最大值
  4. 输入小数，取整
  5. 输入非数字，变成之前的值
*/
export default {
  name: "InputNumber",
  props: {
    min: {
      type: Number,
      default: 1,
    },
    max: {
      type: Number,
      default: 10,
    },
    value: {
      type: Number,
      default: 1,
    },
  },
  data() {
    return {
      currentValue: this.value,
    };
  },
  methods: {
    setCurrentValue(val) {
      this.currentValue += val;
    },
    handleInputBlur(e) {
      this.currentValue = e.target.value;
    },
  },
  watch: {
    currentValue(newVal, oldVal) {
      const { min, max } = this;
      // 输入小数，取整
      let value = Math.round(newVal);
      // 输入小于最小值，等于最小值
      if (value < min) value = min;
      // 输入大于最大值，等于最大值
      if (value > max) value = max;
      // 输入非数字，变成之前的值
      if (Number.isNaN(value)) {
        value = oldVal;
      }
      // 更新currentValue的值
      this.currentValue = value;

      this.$emit("input", value);
    },
  },
};
</script> -->

<style lang="less" scoped>
.controls {
  display: flex;
  width: 100px;
  margin-left: 10px;
  height: 30px;

  .input,
  .dec,
  .add {
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    margin-right: 3px;
    background-color: #ccc;
  }

  .itxt {
    outline: none;
    border: none;
    text-align: center;
    padding: 0 2px;
    width: 44px;
    background-color: transparent;
  }
}
</style>
